/* ═══════════════════════════════════════════════════════════════════════════
   EDITOR-STYLE.CSS — Styles de l'éditeur VOH
   
   Extrait de Index.html pour faciliter la maintenance.
   © 2026 David Dieppedalle — Tous droits réservés
   Auteur: David Dieppedalle (ShadowStorm)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   STYLES DE L'ÉDITEUR VOH — THÈME CLAIR
   ═══════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #ffffff;
    color: #333333;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   BARRE DE MENUS
   ═══════════════════════════════════════════════════════════ */

.menubar {
    display: flex;
    align-items: center;
    padding: 0 4px;
    background-color: var(--voh-interface-bg, #f0f0f0);
    border-bottom: 1px solid var(--voh-interface-border, #cccccc);
    flex-shrink: 0;
    min-height: 28px;
    user-select: none;
    position: relative;
    z-index: 1000;
}

.menubar-item {
    position: relative;
    padding: 4px 10px;
    font-size: 12px;
    color: #333333;
    cursor: pointer;
    border-radius: 3px;
}

.menubar-item:hover,
.menubar-item.menubar-item-open {
    background-color: #d6d6d6;
}

.menubar-title {
    margin-left: auto;
    font-size: 11px;
    color: #888888;
    padding-right: 8px;
}

/* ── Menus déroulants ── */
.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 280px;
    background-color: #f8f8f8;
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 4px 0;
    z-index: 1001;
}

.menu-dropdown.menu-dropdown-visible {
    display: block;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 6px 16px 6px 10px;
    font-size: 12px;
    color: #333333;
    cursor: pointer;
    white-space: nowrap;
}

.menu-item-text {
    flex: 1;
}

.menu-item:hover {
    background-color: #0078d4;
    color: #ffffff;
}

.menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    flex-shrink: 0;
}

.menu-item-icon svg {
    width: 14px;
    height: 14px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.menu-item:hover .menu-item-icon svg {
    filter: brightness(1.8) saturate(0.5);
}

.menu-item-shortcut {
    font-size: 11px;
    color: #888888;
    margin-left: 30px;
}

.menu-item:hover .menu-item-shortcut {
    color: #dddddd;
}

.menu-separator {
    height: 1px;
    background-color: #cccccc;
    margin: 4px 0;
}

/* ── Overlay pour fermer les menus ── */
.menu-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.menu-overlay.menu-overlay-visible {
    display: block;
}

/* ── Modales d'aide (raccourcis, à propos) ── */
.modal-content {
    background: #ffffff;
    border: 1px solid #aaaaaa;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    max-width: 620px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #dddddd;
    background: #f5f7fa;
    border-radius: 8px 8px 0 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #333333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: #999999;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.modal-close:hover {
    color: #333333;
}

.modal-body {
    padding: 16px 20px 20px;
}

.modal-body h3 {
    font-size: 13px;
    font-weight: 600;
    color: #555555;
    margin: 16px 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #eeeeee;
}

.modal-body h3:first-child {
    margin-top: 0;
}

.shortcut-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.shortcut-table td {
    padding: 5px 8px;
    color: #333333;
}

.shortcut-table tr:hover {
    background-color: #f5f7fa;
}

.shortcut-table td:first-child {
    width: 55%;
}

.shortcut-key {
    display: inline-block;
    padding: 1px 6px;
    background: #f0f0f0;
    border: 1px solid #cccccc;
    border-radius: 3px;
    font-family: monospace;
    font-size: 11px;
    color: #444444;
    box-shadow: 0 1px 0 #bbbbbb;
}

.modal-footer {
    padding: 12px 20px;
    border-top: 1px solid #dddddd;
    background: #f5f7fa;
    border-radius: 0 0 8px 8px;
    font-size: 11px;
    color: #888888;
    text-align: center;
}

/* ── Menu contextuel (clic droit dans l'éditeur) ── */
.context-menu {
    display: none;
    position: fixed;
    min-width: 220px;
    background-color: #f8f8f8;
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
    z-index: 6000;
    font-size: 12px;
    user-select: none;
}

.context-menu.context-menu-visible {
    display: block;
}

.context-menu-item {
    display: flex;
    align-items: center;
    padding: 6px 16px 6px 12px;
    color: #333333;
    cursor: pointer;
    white-space: nowrap;
}

.context-menu-item:hover {
    background-color: #0078d4;
    color: #ffffff;
}

.context-menu-item-text {
    flex: 1;
}

.context-menu-item-shortcut {
    font-size: 11px;
    color: #888888;
    margin-left: 30px;
}

.context-menu-item:hover .context-menu-item-shortcut {
    color: #dddddd;
}

.context-menu-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    flex-shrink: 0;
}

.context-menu-item-icon svg {
    width: 14px;
    height: 14px;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.context-menu-item:hover .context-menu-item-icon svg {
    filter: brightness(1.8) saturate(0.5);
}

.context-menu-separator {
    height: 1px;
    background-color: #cccccc;
    margin: 4px 0;
}

/* ═══════════════════════════════════════════════════════════
   BARRE D'OUTILS
   ═══════════════════════════════════════════════════════════ */

.toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 12px;
    background-color: var(--voh-interface-bg2, #e8e8e8);
    border-bottom: 1px solid var(--voh-interface-border, #cccccc);
    flex-shrink: 0;
    min-height: 36px;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-label {
    font-size: 11px;
    color: #555555;
    white-space: nowrap;
}

.toolbar-select {
    background-color: #ffffff;
    color: #333333;
    border: 1px solid #aaaaaa;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
    outline: none;
}

.toolbar-select:hover { border-color: #888888; }
.toolbar-select:focus { border-color: #0078d4; }

.toolbar-separator {
    width: 1px;
    height: 20px;
    background-color: #cccccc;
}

.toolbar-color {
    width: 28px;
    height: 22px;
    border: 1px solid var(--voh-interface-border, #c0c0c0);
    border-radius: 3px;
    padding: 1px;
    cursor: pointer;
    background: none;
}

.toolbar-color::-webkit-color-swatch-wrapper { padding: 0; }
.toolbar-color::-webkit-color-swatch { border: none; border-radius: 2px; }

.toolbar-color-reset {
    width: 18px;
    height: 18px;
    border: none;
    background: none;
    color: #999999;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    line-height: 18px;
    border-radius: 3px;
}

.toolbar-color-reset:hover {
    background-color: #dddddd;
    color: #333333;
}

.toolbar-button-execute {
    background-color: #0e7a0d;
    color: #ffffff;
    border: 1px solid #0b6b0a;
    border-radius: 3px;
    padding: 4px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s;
    margin-left: auto;
}

.toolbar-button-execute:hover { background-color: #12961a; }
.toolbar-button-execute:active { background-color: #0a5e09; }

/* ═══════════════════════════════════════════════════════════
   BARRE D'ONGLETS (scripts)
   ═══════════════════════════════════════════════════════════ */

.tabbar { display:flex; align-items:flex-end; background-color:var(--voh-interface-bg2,#e8e8e8); border-bottom:1px solid var(--voh-interface-border,#cccccc); flex-shrink:0; min-height:30px; padding:0 4px; overflow-x:auto; overflow-y:hidden; user-select:none; }
.tabbar::-webkit-scrollbar { height:3px; }
.tabbar::-webkit-scrollbar-thumb { background:#ccc; border-radius:2px; }
.tabbar-tab { display:flex; align-items:center; gap:6px; padding:5px 12px; font-size:11.5px; color:#666; background-color:transparent; border:1px solid transparent; border-bottom:none; border-radius:4px 4px 0 0; cursor:pointer; white-space:nowrap; position:relative; max-width:200px; }
.tabbar-tab:hover { background-color:rgba(0,0,0,0.05); color:#333; }
.tabbar-tab.tabbar-tab-active { background-color:#fff; color:#333; border-color:var(--voh-interface-border,#ccc); font-weight:600; margin-bottom:-1px; padding-bottom:6px; }
.tabbar-tab-number { font-size:9px; color:#999; font-weight:600; min-width:12px; text-align:center; }
.tabbar-tab-active .tabbar-tab-number { color:#666; }
.tabbar-tab-name { overflow:hidden; text-overflow:ellipsis; }
.tabbar-tab-rename { font-size:11.5px; font-family:inherit; border:1px solid #0078d4; border-radius:2px; padding:0 3px; outline:none; background:#fff; color:#333; width:120px; }
.tabbar-tab-modified { font-size:16px; line-height:1; color:#e08600; margin-left:-2px; }
.tabbar-tab-close { font-size:12px; color:#999; cursor:pointer; line-height:1; padding:0 2px; border-radius:3px; display:none; }
.tabbar-tab-close:hover { background-color:rgba(200,0,0,0.15); color:#c00000; }
.tabbar-project .tabbar-tab-close { display:inline; }
.tabbar-add { display:none; align-items:center; justify-content:center; width:26px; height:26px; font-size:16px; color:#888; background:transparent; border:none; border-radius:4px; cursor:pointer; margin-left:2px; flex-shrink:0; }
.tabbar-add:hover { background-color:rgba(0,0,0,0.08); color:#333; }
.tabbar-project .tabbar-add { display:flex; }
.tabbar-tab.tabbar-tab-dragging { opacity:0.5; }
.tabbar-tab.tabbar-tab-dragover-left { box-shadow:-2px 0 0 0 #0078d4; }
.tabbar-tab.tabbar-tab-dragover-right { box-shadow:2px 0 0 0 #0078d4; }

/* ═══════════════════════════════════════════════════════════
   ÉDITEUR CODEMIRROR
   ═══════════════════════════════════════════════════════════ */

.editor-container .CodeMirror {
    height: 100%;
    font-size: 13px;
    line-height: 1.5;
    cursor: text;
}

/* ── Surcharge du curseur bloc de Neo → barre fine verticale ── */
/* La couleur du curseur est contrôlée par --voh-cursor-color */
/* et mise à jour automatiquement quand le thème change. */
.editor-container .CodeMirror .CodeMirror-cursor {
    background: transparent !important;
    border-left: 1.5px solid var(--voh-cursor-color, #333333) !important;
    border-right: none !important;
    width: 0 !important;
}

/* Empêcher l'italique sur les commentaires — certaines polices */
/* rendent le 'l' minuscule comme un 'L' majuscule en italique. */
.editor-container .CodeMirror span.cm-comment {
    font-style: normal !important;
}

/* ── Couleur de sélection du texte (distincte de la ligne active) ── */
.editor-container .CodeMirror .CodeMirror-selected,
.editor-container .CodeMirror.CodeMirror-focused .CodeMirror-selected {
    background: #add6ff !important;
}

/* Sélection en thèmes sombres → bleu foncé semi-transparent. */
.editor-container .cm-s-monokai .CodeMirror-selected,
.editor-container .cm-s-dracula .CodeMirror-selected,
.editor-container .cm-s-material .CodeMirror-selected,
.editor-container .cm-s-material-darker .CodeMirror-selected,
.editor-container .cm-s-material-ocean .CodeMirror-selected,
.editor-container .cm-s-material-palenight .CodeMirror-selected,
.editor-container .cm-s-cobalt .CodeMirror-selected,
.editor-container .cm-s-nord .CodeMirror-selected,
.editor-container .cm-s-solarized .CodeMirror-selected,
.editor-container .cm-s-ayu-dark .CodeMirror-selected,
.editor-container .cm-s-ayu-mirage .CodeMirror-selected,
.editor-container .cm-s-oceanic-next .CodeMirror-selected,
.editor-container .cm-s-gruvbox-dark .CodeMirror-selected,
.editor-container .cm-s-tomorrow-night-eighties .CodeMirror-selected,
.editor-container .cm-s-blackboard .CodeMirror-selected,
.editor-container .cm-s-mbo .CodeMirror-selected,
.editor-container .cm-s-seti .CodeMirror-selected,
.editor-container .cm-s-zenburn .CodeMirror-selected,
.editor-container .cm-s-3024-night .CodeMirror-selected {
    background: rgba(51, 144, 255, 0.35) !important;
}

/* ── Wrapper éditeur + minimap ── */
.editor-wrapper {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    position: relative;
}

.editor-wrapper .editor-container {
    flex: 1;
    overflow: hidden;
}

/* ── Minimap (aperçu du code) ── */
.minimap {
    width: 90px;
    min-width: 50px;
    max-width: 400px;
    background-color: #f5f5f5;
    border-left: 1px solid #dddddd;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
}

.minimap-canvas {
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* ── Barre de redimensionnement (bord gauche de la minimap) ── */
.minimap-resize-handle {
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
}

.minimap-resize-handle:hover,
.minimap-resize-handle.minimap-resize-active {
    background-color: rgba(0, 120, 212, 0.4);
}

.minimap-viewport {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 120, 212, 0.12);
    border-top: 1px solid rgba(0, 120, 212, 0.35);
    border-bottom: 1px solid rgba(0, 120, 212, 0.35);
    pointer-events: none;
    min-height: 10px;
    transition: top 0.05s ease;
}

.minimap-hover-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: rgba(0, 120, 212, 0.3);
    pointer-events: none;
    display: none;
}

/* ── Barre d'information API (basée sur le curseur texte) ── */
.api-infobar {
    display: none;
    flex-direction: column;
    padding: 4px 14px;
    background: linear-gradient(to bottom, #eaf0fc, #e0e8f8);
    border-top: 2px solid #a0b4d8;
    font-size: 12px;
    line-height: 1.5;
    flex-shrink: 0;
}

.api-infobar.api-infobar-visible {
    display: flex;
}

/* ── Ligne 1: signature + retour ── */
.api-infobar-line1 {
    display: flex;
    align-items: center;
    gap: 6px;
}

.api-infobar-icon {
    color: #ffffff;
    background-color: #5577cc;
    font-weight: 700;
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.api-infobar-signature {
    color: #1a4fa0;
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
}

.api-infobar-return {
    color: #2e8b2e;
    font-size: 11px;
    margin-left: auto;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-weight: 600;
}

/* ── Ligne 2: description + paramètres ── */
.api-infobar-line2 {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-left: 22px;
    font-size: 11px;
}

.api-infobar-description {
    color: #555555;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.api-infobar-params {
    color: #666666;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 11px;
}

.api-infobar-param-name {
    color: #b35a00;
    font-weight: 600;
}

.api-infobar-param-desc {
    color: #777777;
}

.api-infobar-param-separator {
    color: #cccccc;
    margin: 0 2px;
}

.api-infobar-doc-link {
    color: #ffffff;
    background-color: #5577cc;
    font-weight: 700;
    font-size: 11px;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    margin-left: 8px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: background-color 0.15s;
}

.api-infobar-doc-link:hover {
    background-color: #3355aa;
}

/* ── Dropdown d'autocomplétion API ── */
.autocomplete-dropdown {
    display: none;
    position: fixed;
    min-width: 520px;
    max-width: 720px;
    max-height: 220px;
    overflow-y: auto;
    background-color: #ffffff;
    border: 1px solid #b0b8cc;
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    z-index: 8000;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 12px;
}

.autocomplete-dropdown.autocomplete-visible {
    display: block;
}

.autocomplete-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
}

.autocomplete-item:hover,
.autocomplete-item.autocomplete-active {
    background-color: #d6e4ff;
}

.autocomplete-item-icon {
    color: #ffffff;
    background-color: #5577cc;
    font-weight: 700;
    font-size: 9px;
    width: 14px;
    height: 14px;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.autocomplete-item-name {
    color: #1a4fa0;
    font-weight: 600;
}

.autocomplete-item-desc {
    color: #888888;
    font-size: 11px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ═══════════════════════════════════════════════════════════
   BARRE DE STATUT
   ═══════════════════════════════════════════════════════════ */

.statusbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 12px;
    background-color: #0078d4;
    color: #ffffff;
    font-size: 11px;
    flex-shrink: 0;
    min-height: 22px;
}

.statusbar-left,
.statusbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.statusbar-filename {
    font-weight: 600;
}
/* ═══════════════════════════════════════════
   MODALE — THÈME PERSONNALISÉ
   ═══════════════════════════════════════════ */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 5000;
    justify-content: center;
    align-items: center;
}

.modal-overlay.modal-overlay-visible {
    display: flex;
}

.modal-box {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 24px;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 16px;
}

.modal-preset-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e0e0e0;
}

.modal-preset-row label {
    font-size: 12px;
    color: #555555;
    white-space: nowrap;
}

.modal-preset-row select {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #cccccc;
    border-radius: 4px;
    background-color: #ffffff;
}

.modal-color-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    margin-bottom: 20px;
}

.modal-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-color-row input[type="color"] {
    width: 32px;
    height: 24px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    padding: 1px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

.modal-color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.modal-color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 2px; }

.modal-color-row label {
    font-size: 12px;
    color: #333333;
}

.modal-preview {
    background-color: #1e1e1e;
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-family: 'Consolas', 'Fira Code', monospace;
    font-size: 12px;
    line-height: 1.6;
    overflow: hidden;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.modal-button {
    padding: 7px 20px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #cccccc;
    background-color: #f5f5f5;
    color: #333333;
}

.modal-button:hover {
    background-color: #e8e8e8;
}

.modal-button-primary {
    background-color: #0078d4;
    border-color: #0078d4;
    color: #ffffff;
}

.modal-button-primary:hover {
    background-color: #006cbd;
}

/* ═══════════════════════════════════════════════════════════
   PANNEAU RECHERCHER / REMPLACER (flottant dans l'éditeur)
   ═══════════════════════════════════════════════════════════ */

.search-panel {
    display: none;
    position: absolute;
    z-index: 100;
    background-color: #f8f8f8;
    border: 1px solid #c0c0c0;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    min-width: 440px;
    font-size: 12px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.search-panel.search-panel-visible {
    display: block;
}

/* ── Barre de titre du panneau (zone de drag) ── */
.search-panel-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 10px;
    background-color: #e8e8e8;
    border-bottom: 1px solid #c0c0c0;
    border-radius: 6px 6px 0 0;
    cursor: move;
    user-select: none;
}

.search-panel-titlebar-text {
    font-size: 11px;
    font-weight: 600;
    color: #444444;
}

.search-panel-body {
    padding: 10px 12px;
}

.search-panel-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.search-panel-row:last-child {
    margin-bottom: 0;
}

.search-panel-label {
    font-size: 11px;
    color: #555555;
    white-space: nowrap;
    min-width: 72px;
    text-align: right;
}

.search-panel-input {
    flex: 1;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    outline: none;
    background-color: #ffffff;
    color: #333333;
    font-family: 'Consolas', 'Fira Code', monospace;
}

.search-panel-input:focus {
    border-color: #0078d4;
    box-shadow: 0 0 0 1px rgba(0, 120, 212, 0.25);
}

.search-panel-count {
    font-size: 11px;
    color: #888888;
    white-space: nowrap;
    min-width: 70px;
    text-align: center;
}

.search-panel-close {
    background: none;
    border: none;
    font-size: 14px;
    color: #999999;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.search-panel-close:hover {
    color: #333333;
}

.search-panel-options {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding-left: 78px;
}

.search-panel-options label {
    font-size: 11px;
    color: #555555;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
}

.search-panel-actions {
    display: flex;
    gap: 4px;
    padding-left: 78px;
}

.search-panel-button {
    padding: 3px 10px;
    font-size: 11px;
    border: 1px solid #bbbbbb;
    border-radius: 3px;
    background-color: #f0f0f0;
    color: #333333;
    cursor: pointer;
    white-space: nowrap;
}

.search-panel-button:hover {
    background-color: #e0e0e0;
    border-color: #999999;
}

.search-panel-button-primary {
    background-color: #0078d4;
    border-color: #0078d4;
    color: #ffffff;
}

.search-panel-button-primary:hover {
    background-color: #006cbd;
}

/* ── Surlignage des résultats de recherche dans l'éditeur ── */
.cm-searching {
    background-color: rgba(255, 200, 0, 0.45);
    border-bottom: 1px solid #e8a000;
}

/* ═══════════════════════════════════════════════════════════
   MODALE — PRÉFÉRENCES DE L'ÉDITEUR
   ═══════════════════════════════════════════════════════════ */

.preferences-modal-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px 16px;
    align-items: center;
    margin-bottom: 20px;
}

.preferences-modal-label {
    font-size: 12px;
    color: #555555;
    text-align: right;
    white-space: nowrap;
}

.preferences-modal-select {
    width: 100%;
    padding: 5px 8px;
    font-size: 12px;
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    background-color: #ffffff;
    color: #333333;
    outline: none;
    cursor: pointer;
}

.preferences-modal-select:focus {
    border-color: #0078d4;
}

.preferences-modal-color-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.preferences-modal-color {
    width: 36px;
    height: 26px;
    border: 1px solid #bbbbbb;
    border-radius: 4px;
    padding: 1px;
    cursor: pointer;
    background: none;
}

.preferences-modal-color::-webkit-color-swatch-wrapper { padding: 0; }
.preferences-modal-color::-webkit-color-swatch { border: none; border-radius: 3px; }

.preferences-modal-reset {
    padding: 3px 10px;
    font-size: 11px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background-color: #f5f5f5;
    color: #666666;
    cursor: pointer;
}

.preferences-modal-reset:hover {
    background-color: #e8e8e8;
    color: #333333;
}